<template>
    <div class="container">
        <div class="top">
            <div class="logo"></div>
            <div class="ageEmit"></div>
        </div>
        <div class="bigLogo"></div>
        <div class="center">
            <div>为了感谢各位御主的支持，我们将会在御主的生日月为各位御主送上生日祝福，祝福将在祝福页面呈现，敬请期待！</div>
            <div>2024年5月13日发布后~2024年5月27日12:00活动期间，在本页面正确填写并提交信息的御主即可参与本次活动；</div>
            <div>此外，在活动期间登陆游戏的御主还有机会获得实体生日礼物噢！</div>
        </div>
        <div class="bottom">
            <!-- <div>
                <p>收集</p>
                <p>开始</p>
            </div>
            <div>
                <p>收集</p>
                <p>截至</p>
            </div>
            <div>
                <p>入选</p>
                <p>公示</p>
            </div>
            <div>寄送</div> -->
        </div>

    </div>

</template>


<style lang="scss" scoped>
.container {
    height: 58.4375rem;
    position: relative;

    .top {
        height: 6.5625rem;
        margin-top: 1.75rem;
        display: flex;
        justify-content: space-between;
        padding: 0 1.625rem;

        .logo {
            flex: 1;
            background: url(../../assets/46fb49e9ffc65010154784e0e7e6fa770b8a1bea.png) no-repeat;
            background-size: contain;

        }

        .ageEmit {
            flex: 1;
            background: url(../../assets/shiling.png) no-repeat;
            background-size: contain;
            background-position: right;
            position: relative;
            top: -0.5rem;
            // right: 1.5625rem;
        }
    }

    .bigLogo {
        height: 18.75rem;
        width: 100%;
        position: absolute;

        // top: 8rem;
        // left: 14rem;
        // opacity: .3;
        background: url(../../assets/cf2ea1908ccf93ce33ed71af5f6bc3bb8898b094.png) no-repeat;
        background-size: contain;
        background-position: center;
    }

    .center {
        position: relative;
        z-index: 9;
        margin-top: 13.75rem;
        height: 13.125rem;
        padding: 0 1.5rem;
        background-color: rgba(0, 0, 0, .2);

        >div {
            text-indent: 2em;
            line-height: 2.3875rem;
            font-size: 1.375rem;
            color: azure;
            font-weight: 600;
        }
    }

    .bottom {
        height: 10.125rem;
        // display: flex;
        // justify-content: space-evenly;
        margin-top: 8.5rem;
        background: url(../../assets/btn.png) no-repeat;
        background-size: cover;
        // >div {
        //     height: 8.375rem;
        //     width: 8.375rem;
        //     border: 1px solid rgb(163, 168, 188);

        //     background: linear-gradient(to bottom, #16244b, #244383);
        //     border-radius: 50%;
        //     display: flex;
        //     flex-direction: column;
        //     justify-content: center;
        //     align-items: center;
        //     font-size: 1.5625rem;
        //     color: #e9f1ff;
        //     font-family: 'STzhongsong', 'Microsoft YaHei', serif;
        //     font-weight: 600;

        // }
    }
}
</style>